<template>
<div class="row justify-center" :style="$q.platform.is.mobile?'':'margin-top:200px;'">
  <q-card class="col-xs-12 col-sm-6" square>
    <q-card-title class="bg-primary text-white q-py-xs">
      <b style="line-height:40px;">用户登录</b>
      <img slot="right" alt="Paprika" src="statics/logo/banner1-150X40.png">
    </q-card-title>
    <q-card-main>
        <q-field icon="mdi-account" helper="用户账号(姓名的全拼)" class="q-mt-lg"
          error-label="请填写用户账号(姓名的全拼)">
          <q-input v-model.trim="model.code" type="text" ref="code" 
            autocomplete="off" autocapitalize="off"
            @blur="$v.model.code.$touch" :error="$v.model.code.$error"/>
        </q-field>
        <q-field icon="mdi-textbox-password" helper="登录密码" class="q-mt-lg"
          error-label="请填写登录密码">
          <q-input v-model="model.password" type="password" 
            autocomplete="off" autocapitalize="off"
            @blur="$v.model.password.$touch" :error="$v.model.password.$error"
            ref="password" @keyup.enter="login" />
        </q-field>
    </q-card-main>
    <q-card-separator class="q-mt-lg"/>
    <q-card-actions align="end">
        <q-btn label="登录" color="primary" icon="mdi-login" @click="login" />
    </q-card-actions>
  </q-card>
</div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  name: 'Login',
  data () {
    return {
      loading: false,
      model: {
        code: '',
        password: ''
      }
    }
  },
  validations: {
    model: {
      code: { required },
      password: { required },
    }
  },
  methods: {
    login () {
      let me = this;
      me.$v.model.$touch();
      if (me.$v.model.$error) {
        me.$q.notify({
          message: '请完整填写登录信息',
          type: 'negative'
        });
        return;
      }

      me.$api.account.login(me.model.code, me.model.password, res=>{
        let redirect = me.$route.query.redirect;
        me.$router.push(redirect?redirect:'/');
        location.reload()
      });
    }
  },
  mounted () {
    this.$refs.code.focus();
  }
}
</script>

<style>

</style>
